<template>
  测试组件
  <span>{{ n + m }}</span>
  <br />
  <span>{{ x }} - {{ title }}</span>
</template>

<script>
export default {
  name: "demo-one",
  props: ["x", "title"],
  /*
   Vue3组件:程序的入口「聚合式API的思想，就是把代码都写在这里」 
     @1 在 init props 和 beforeCreate 之间调用
       + 可以基于props获取注册的属性「经过Proxy劫持的响应式数据」
         + 同样属性值不能直接进行修改「因为是只读的」
       + 在setup函数中是没有this的「vue3中this存在的意义是不大的」
   */
  setup(props) {
    let n = 12,
      m = 13;

    /*
     @2 函数返回的对象中包含啥，就把啥放在了this对象上，目的：在视图中直接使用「因为只要挂载到this上的东西，视图中可以直接使用（虽然它不在是Vue实例对象）」
     */
    return {
      n,
      m,
    };
  },
};
</script>